<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东北地区</title>
    <script src="./asset/echarts/echarts.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 准备一个容器，放置图表 -->
<div id="demo" style="width: 1000px;height: 600px;" class="container text-center">

</div>

<!-- 使用js绘制图表 -->
<script>
    //初始化
    var myChart = echarts.init(document.querySelector('#demo'))

    //指定图表的配置
    option = {
        backgroundColor: '#2c343c',
        title: {
            text: '东北地区',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '来自',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    { value: 335, name: '柑橘种植技术' },
                    { value: 310, name: '病虫害防治' },
                    { value: 274, name: '柑橘品种' },
                    { value: 235, name: '柑橘百科' },
                    { value: 372, name: '柑橘视频' }
                ].sort(function (a, b) {
                    return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };
    myChart.setOption(option)

</script>
<link rel="stylesheet" href="./asset/bootstrap@5.3.0/css/bootstrap.min.css">
</body>
</html>
